import { defineComponent } from "vue";
import { Row, Col, FormItem, Space, Button, RowProps } from "ant-design-vue";
import { h } from "vue";
import "./index.less";


// 是否给查询和重置添加权限

export default defineComponent({
	props:{loading:{type:Boolean,required:false}},
	setup(props, ctx) {
		const gridReactiveProps = {
			lg: 12,
			xl: 8,
			span: 12,
			xxxl: 4,
			xxl: 6,
		};

		const cls = "   cover-fill-content   ";

		const slotsNodes = ctx.slots.default!().map(node => {
			if (typeof node.props === "object" && node.props !== null) {
				const existClassname = node.props?.class ?? "";
				node.props.labelCol = {
					style: { width: "160px" },
				};
				node.props.class = typeof existClassname === "string" ? existClassname + cls : cls;
			}
			return h(Col, {
				...gridReactiveProps
			}, () => node);
		});

		let rowJustity = "space-between" as RowProps["justify"];

		switch (slotsNodes.length) {
			case 1:
			case 2:
			case 3:
				rowJustity = "start";
				break;
			case 4:
				rowJustity = "end";
				break;
			default:
				break;
		}

		const formReset = () => {
			ctx.emit("reset");
			ctx.emit("finish", {});
		};

		const oper = () => typeof ctx.slots.operation === "function" ? ctx.slots.operation() : null;

		return () => (
			<Row gutter={[8, 16]} justify={rowJustity} class="x-full">
				{slotsNodes}
				<Col {...gridReactiveProps}>
					<FormItem class="cover-opertion-fill ">
						<Space>
							<Button type="primary" html-type="submit" loading={typeof props.loading === "undefined" ? false : props.loading} >
								查询
							</Button>
							<Button onClick={formReset} loading={typeof props.loading === "undefined" ? false : props.loading}>重置</Button>
							{oper()}
						</Space>
					</FormItem>
				</Col>
			</Row>
		);
	},
});
